import React from 'react';
import MainUI from '../../components/layout/MainUI';
import AddMerchantModalUI from '../../components/shop/merchant/AddMerchantModalUI'
import {connect} from 'dva';
import moment from 'moment';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Pagination,
  Popconfirm,
  Row,
  Table,
  message,
  Dropdown,
  Menu,
  Icon,
  Input,
  Modal,
  InputNumber,
  Select
} from 'antd';

const FormItem = Form.Item;
const params = {
  pageSize: 10,
  pageNumber: 1
};
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
};

class Merchant extends React.Component {

  state = {
    columns: [
      {title: '名称', dataIndex: 'name',},
      {title: '地址', dataIndex: 'address',},
      {title: '手机', dataIndex: 'cellphone',},
      {title: '营业时间', dataIndex: 'work',},
      {title: '状态', dataIndex: 'del',render: (text) => { return text=="0"?"正常":text=="1"?<font color='red'>已删除</font>:"未知" }},
      {title: '到期时间',width: 200, dataIndex: 'expireDate', render: (value,row) => {
        if(value>new Date()){
          return  <font color='green' size={2}>{moment(value).format("YYYY-MM-DD HH:mm:ss")}</font>;
        }else{
          if(row.del=="0"){
            return <font color='red' size={2}>已到期(请删除) { moment(value).format("YYYY-MM-DD")} </font>;
          }else{
            return <font color='red' size={2}>已到期 { moment(value).format("YYYY-MM-DD")}</font>;
          }
        }

      }},
      {
        title: '操作', render: (text, row, index) => {
        const menu = <Menu>
          {row.del===0 ? <Menu.Item key={"delete" + row.id}>
                          <Popconfirm title="你确定要进行删除操作?" onConfirm={() => {
                            this.delete(row);
                          }} okText="是" cancelText="否">
                            <Button type='danger' icon="delete" size="small">删除</Button>
                          </Popconfirm>
                      </Menu.Item>
          :
                    <Menu.Item key={"reback" + row.id}>
                          <Button size="small" onClick={()=>{
                            this.reback(row);
                          }}>还原</Button>
                    </Menu.Item>
          }
          <Menu.Divider/>
          <Menu.Item key={"charge" + row.id}>
            <Button size="small" onClick={()=>{
              this.showModal(row);
            }}>充值</Button>
          </Menu.Item>

        </Menu>;
        return <Dropdown overlay={menu} trigger={['click']}>
          <a className="ant-dropdown-link" href="#">
            菜单 <Icon type="down"/>
          </a>
        </Dropdown>

      }
      },
    ],
    addModalVisible: false,
    visible: false,
    chargeInfo:{},

  };
  addModalVisiblefuc = (bool) => {
    const state = this.state;
    state.addModalVisible = bool;
    this.setState(state);
  };
  search = (page, pageSize) => {
    if (page != null || page != undefined) {
      params.pageNumber = page;
    }

    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'merchant/getPageMerchant',
          payload: {...params, ...values}
        });
      }
    });
  };

  delete = (row) => {
    if (row != undefined || row != null) {
      const ids = [row.id];
      this.props.dispatch({
        type: 'merchant/delete',
        payload: {ids: ids,params:params}
      });
    } else {
      message.warning('请选择需要删除的数据！');
    }
  };
  reback = (row) => {
    if (row != undefined || row != null) {
      const ids = [row.id];
      this.props.dispatch({
        type: 'merchant/reback',
        payload: {ids: ids,params:params}
      });
    } else {
      message.warning('请选择需要删除的数据！');
    }
  };
  showModal = (row) => {
    const state=this.state;
    state.chargeInfo.id=row.id;
    state.chargeInfo.addYear=0;
    state.visible=true;
    this.setState(state);
  };
  handleOk = () => {
    const state=this.state;
    if(state.chargeInfo.id==null||state.chargeInfo.addYear==null||state.chargeInfo.addYear==0){
      message.warning('请输入增加的年数！');
      return;
    }else{
      this.props.dispatch({
        type: 'merchant/e_chargeUpdate',
        payload: { chargeInfo:state.chargeInfo,params:params}
      });
    }
    state.chargeInfo={};
    state.visible=false;
    this.setState(state);
  };
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  numberOnChange = (n) => {
    const state=this.state;
    state.chargeInfo.addYear=n;
    this.setState(state);
  };

  render() {

    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item> 商户管理</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Form className="ant-advanced-search-form"  >
            <Row>
              <Col span={4}>
                <FormItem {...formItemLayout} label='名称'>
                  {this.props.form.getFieldDecorator('name')(
                    <Input placeholder="姓名" suffix={<Icon type='user' />} />
                  )}
                </FormItem>
              </Col>
              <Col span={4} >
                <FormItem {...formItemLayout} label='电话'>
                  {this.props.form.getFieldDecorator('cellphone',{
                    rules: [
                      {
                        message:"请输入手机号",
                        type: "string",
                        pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                      },
                    ],
                  })(
                    <Input placeholder="手机号"  suffix={<Icon type='phone' />}/>
                  )}
                </FormItem>
              </Col>
              <Col span={4} >
              <FormItem {...formItemLayout} label='状态'>
                {this.props.form.getFieldDecorator('del',{
                  initialValue: '0',
                })(
                  <Select  style={{marginTop:'3px'}}>
                    <Select.Option  value="3">全部</Select.Option>
                    <Select.Option value="0">正常</Select.Option>
                    <Select.Option value="1">已删除</Select.Option>
                  </Select>
                )}
              </FormItem>
            </Col>
              <Col span={2}>
                <Button style={{ marginLeft: 8 ,marginTop:'3px'}} onClick={()=>{
                  this.props.form.resetFields();
                }}>
                  清空
                </Button>
              </Col>
            </Row>
          </Form>
          <Row>
            <Col span={24} style={{textAlign: 'right'}}>
              <Button type="primary" icon="retweet" onClick={() => {
                this.search();
              }}>刷新</Button>
              <span className="ant-divider"/>
              <Button onClick={() => {
                this.addModalVisiblefuc(true)
              }}>新增</Button>

            </Col>
          </Row>
          <Row>
            {<Table bordered={true} rowKey='id' style={{marginTop: '10px'}}
                    columns={this.state.columns}
                    dataSource={this.props.pageRows.data} pagination={false}/>}
            {
              this.props.pageRows.pageNumber != undefined ?
                <Pagination style={{float: 'right', marginTop: '5px'}} onChange={this.search}
                            total={this.props.pageRows.totalRows} current={this.props.pageRows.pageNumber}
                            pageSize={this.props.pageRows.pageSize}/> : ''
            }
          </Row>
          {
            this.state.addModalVisible ? <AddMerchantModalUI showOrHiddenModalVisible={this.addModalVisiblefuc}/> : ''
          }
          <Modal
            title="到期年份调整"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            maskClosable={false}
          >
            <font color='green' size={4}>充值年数 : </font> {this.state.visible?<InputNumber min={1} max={5} defaultValue={0} onChange={this.numberOnChange} />:''}
          </Modal>
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    pageRows: state.merchant.pageRows,
  }
}

export default connect(mapStateToProps)(Form.create()(Merchant));
